<template>
  <div class="part">
    <div class="title">
      <div class="inner">{{ this.title }}</div>
    </div>
    <div class="description">
      <div class="desc-left">
        <div class="difficulty">
          <div class="inner">{{this.difficulty}}</div>
        </div>
      </div>
      <div>
        <router-link to="/coder"
                     class="link">
          <i class="iconfont">&#xe767;</i>先去练练
        </router-link>
      </div>
    </div>
    <div class="context">
      <div class="inner">{{ problem.problem_context }}</div>
    </div>
    <div class="example-area">
      <div class="example"
           v-for="item in examples"
           :key="item.example_id">
        <div class="example-context">
          输入：{{ item.example_context }}
        </div>
        <div class="example-out">
          输出：{{ item.example_out }}
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getExamples } from '@/api/problem'
export default {
  props: {
    problem: {
      type: Object,
      default: () => ({})
    }
  },
  data () {
    return {
      level: ['简单', '中等', '困难'],
      examples: []
    }
  },
  mounted () {
    getExamples(this.$route.params.problemId)
      .then(res => {
        this.examples = res.data
      })
  },
  computed: {
    title: function () {
      return this.problem.problem_id ? `${this.problem.problem_id}. ${this.problem.problem_title}` : ''
    },
    difficulty: function () {
      return this.problem.problem_id ? `难度：${this.level[this.problem.problem_level]}` : ''
    },
    grade: function () {
      return this.problem.problem_id ? `总分：${this.problem.problem_grade}` : ''
    }
  }
}
</script>
<style lang="stylus" scoped>
@import '~styles/varibles.styl'

.part
  color #212121
  .title
    margin-bottom 10px
    &>div
      min-height 30px
      font-size 24px
      font-weight bold
      line-height 30px
      border-radius 6px
  .description
    display flex
    flex-direction row
    justify-content space-between
    margin-bottom 10px
    padding-bottom 10px
    border-bottom split-line
    .desc-left
      display flex
      flex-direction row
      .difficulty, .grade
        &>div
          min-width 80px
          min-height 25px
          line-height 25px
          border-radius 4px
    .link
      color color-normal
      line-height 25px
      &:hover
        text-decoration underline
  .context
    border-bottom split-line
    margin-bottom 10px
    padding-bottom 10px
    overflow hidden
    &>div
      display flex
      align-items center
      min-height 100px
      line-height 1.25
      font-size 18px
      border-radius 6px
  .example-area
    min-height 100px
    border-radius 6px
    .example
      margin-bottom 10px
      .example-context, .example-out
        display flex
        flex-direction row
        font-size 18px
  .inner, .example-area
    &:empty
      background-color color-unload
</style>
